<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>文章</h2>
    </div>
    <el-form :label-position="labelPosition" label-width="80px" @submit.native.prevent="saveCategory">
      <el-tabs value="basic" type="border-card">
        <el-tab-pane label="基本信息" name="basic">
          <el-form-item label="上级分类" style="width: 50%;margin-left: 20%">
            <el-select v-model="model.categories" multiple>
              <el-option v-for="item in parentsOptions" :label="item.name" :value="item._id" :key="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章标题" style="width: 50%;margin-left: 20%">
            <el-input v-model="model.title"></el-input>
          </el-form-item>
          <el-form-item label="文章简介" style="width: 50%;margin-left: 20%">
            <el-input type="textarea" v-model="model.account"></el-input>
          </el-form-item>
          <el-form-item label="文章图片" style="width: 50%;margin-left: 20%">
            <el-upload
              class="avatar-uploader"
              :action="$http.defaults.baseURL + '/uploads'"
              :show-file-list="false"
              :headers="getAuthHeaders()"
              :on-success="handleImageSuccess">
              <img v-if="model.image" :src="model.image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="作者信息" name="author">
          <el-form-item label="作者名称" style="width: 50%;margin-left: 20%">
            <el-select v-model="model.authorinfo">
              <el-option v-for="item1 in authorOptions" :label="item1.nickname" :value="item1._id" :key="item1._id"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="头像" style="width: 50%;margin-left: 20%">-->
<!--            -->
<!--&lt;!&ndash;            <el-upload&ndash;&gt;-->
<!--&lt;!&ndash;              class="avatar-uploader"&ndash;&gt;-->
<!--&lt;!&ndash;              :action="$http.defaults.baseURL + '/uploads'"&ndash;&gt;-->
<!--&lt;!&ndash;              :show-file-list="false"&ndash;&gt;-->
<!--&lt;!&ndash;              :headers="getAuthHeaders()"&ndash;&gt;-->
<!--&lt;!&ndash;              :on-success="handleAvatarSuccess">&ndash;&gt;-->
<!--&lt;!&ndash;              <img v-if="model.avatar" :src="model.avatar" class="avatar">&ndash;&gt;-->
<!--&lt;!&ndash;              <i v-else class="el-icon-plus avatar-uploader-icon"></i>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-upload>&ndash;&gt;-->
<!--          </el-form-item>-->
        </el-tab-pane>
        <el-tab-pane label="文章详情" name="detail">
          <quill-editor style="height:400px;" v-model="model.detail" :options="editorOption"/>
        </el-tab-pane>
      </el-tabs>

      <el-form-item style="margin-left: 35%;margin-top: 10px;">
        <el-button type="success" round  native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import auth from '../../mixin/index'
  import { quillEditor } from 'vue-quill-editor'
  import {quillRedefine} from 'vue-quill-editor-upload'
  export default {
    name: "Article",
    props:['id'],
    mixins:[auth],
    components:{
      quillEditor
    },
    data(){
      return {
        model:{
          categories:[],
          image:'',
          title:'',
          date:'',
          detail:'',
          avatar:'',
          account:''
        },
        editorOption:null,
        parentsOptions:[],
        authorOptions:[],
        labelPosition:'right'
      }
    },
    methods:{
      async fetchAuthorOptions(){
        const res = await this.$http.get(`/rest/admin_users`)
        console.log(res)
        this.authorOptions = res.data.list
      },
      async fetchCategoryData(){
        const res = await this.$http.get(`/rest/categories`)
        this.parentsOptions = res.data.list
      },
      handleImageSuccess(res){
        this.model.image = res.url
      },
      handleAvatarSuccess(res){
        this.model.avatar = res.url
      },
      async saveCategory(){
        this.date = new Date().getTime()
        if(this.id){
          await this.$http.put(`/rest/articles/${this.id}`,this.model)
          this.$message({
            message: `修改文章${this.model.title}成功`,
            type: 'success'
          });
          this.$router.push('/articles/list')
        }else {
          const result = await this.$http.post(`/rest/articles`,this.model)
          if(result.status != 200){
            this.$message({
              message: `文章${result.data}`,
              type: 'warning'
            });
            // this.model = Object.assign(this.$data, this.$options.data())
          } else {
            this.$message({
              message: `创建文章${this.model.title}成功`,
              type: 'success'
            });
            this.$router.push('/articles/list')
          }
        }
      },
      async getArticlesEditData(){
        const result = await this.$http.get(`/rest/articles/${this.id}`)
        this.model = result.data
      }
    },
    created() {
      this.fetchAuthorOptions()
      this.fetchCategoryData()
      this.id && this.getArticlesEditData()
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action:  this.$http.defaults.baseURL + '/uploads',  // 必填参数 图片上传地址,这里的后台是node
            name: 'file',  // 必填参数 文件的参数名
            methods: 'POST', // 必填参数 图片上传方式
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (response) => {
              // 这里切记要return回你的图片地址
              return response.url
            }
          },
          theme:'snow'//这个是组题
        }
      )
    }
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader-icon[data-v-30d06b48]{
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader-icon[data-v-30d06b48]:hover{
    border-color: #409EFF;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
